<template>
  <el-card class="box-card">
    <el-calendar ref="calendar">
      <template #header="{ date }">
        <el-button size="small" type="primary" @click="clockRemark" v-if="!clockIn">上班打卡</el-button>
        <el-button size="small" type="primary" @click="clockRemark" v-else-if="!clockOut">下班打卡</el-button>
        <el-text type="info" v-else>今日已打卡</el-text>
        <!-- <el-button size="small" type="primary" @click="clockRemark" v-if="new Date().getHours() < 12">上班打卡</el-button>
        <el-button size="small" type="primary" @click="clockRemark" v-else>下班打卡</el-button> -->
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下个月
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          <!-- {{ data.isSelected ? '✔️' : '' }} -->
          <el-tag :type="showStatus(data.day)?.type" effect="dark" round
            v-if="showStatus(data.day)?.statusName != null">
            {{ showStatus(data.day)?.statusName }}
          </el-tag>
        </p>
      </template>
    </el-calendar>
  </el-card>
</template>

<script lang="ts" setup>
import { defineComponent, ref, computed } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { getAll, userAttendance } from "@/api/attendance/record";
import { statusData } from '../enum'

let loading = ref(false)
let list = ref([])
let clockIn = ref(false)
let clockOut = ref(false)
const getList = () => {
  loading.value = true
  getAll()
    .then(res => {
      loading.value = false
      list.value = res.data.map(o => {
        if (!o.recordDate) {
          return {
            date: '',
            status: ''
          }
        }
        if(isToday(o.recordDate)){
          if(o.clockInTime) clockIn.value = true
          if(o.clockOutTime) clockOut.value = true
        }
        return {
          date: o.recordDate.split("T")[0],
          status: o.status
        }
      })
    })
}
const isToday = (date: Date) => {
  if (!date) return false
  var date = new Date(date);
  var today = new Date();
  return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()
}
const clockRemark = () => {
  userAttendance().then(res=>{
    getList()
  })
}
getList()

const calendar = ref<CalendarInstance>()

const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const showStatus = computed(() => (date: Date) => {
  var at = list.value.find(x => x.date === date)
  if (at) {
    const status = statusData.find(r => r.value === at.status)
    status ? at.statusName = status.label : at.status
    status ? at.type = status.type : ''
    return at
  } else {
    return null
  }
})
</script>

<style lang="scss" scoped>
.box-card {

  // margin-top: 20px;
  .card-header {
    text-align: left;
  }

  .box {
    .item {
      display: flex;
      align-items: center;

      * {
        margin-right: 20px;
      }
    }

    .my-item {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-direction: column;

      p {
        margin-top: 10px;
      }
    }
  }
}
</style>